<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<META HTTP-EQUIV="pragma" CONTENT="no-cache">
		<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
		<META HTTP-EQUIV="expires" CONTENT="0">
		<title>枕边文书管理系统</title>
		<link rel="stylesheet" href="css/init.css" />
		<link rel="stylesheet" href="css/element-ui.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
		<script type='text/javascript' src='js/layer.js'></script>
		<script type='text/javascript' src='js/layui.js'></script>
		<script src="js/dyConfig.js" type="text/javascript" charset="utf-8"></script>
		<link rel="shortcut icon" href="./img/logo.jpg" type="image/x-icon">
		<!-- <script type="text/javascript">
			function getQueryString(key) {
				var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
				var result = window.location.search.substr(1).match(reg);
				return result ? decodeURIComponent(result[2]) : null;
			}
			//判断登录失效
			// function login(){
			if (!getQueryString("id")) {
				window.location.href = `./pages/admin/start/start.html`
			}
			// }
			// login()
		</script> -->
		<style>
			[v-cloak] {
				display: none !important;
			}

			.el-dropdown-link {
				cursor: pointer;
				color: #409EFF;
			}

			.el-icon-arrow-down {
				font-size: 12px;
			}

			.el-button {
				text-decoration: none;
				margin-left: 30px;
				height: 30px;
				line-height: 7px;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<!-- 左边 导航栏 -->
			<div class="left-side" :style="{backgroundColor:webInfo.bg}">
				<!-- 顶部盒子 显示系统名称 头像 欢迎 -->
				<div class="left-top-box">
					<div class="left-top-title" :style="{color:webInfo.textColorActive}">{{adminName}}</div>
					<div class="left-top-avatar">
						<!-- <img src="./img/head.jpg" /> -->
						<img v-bind:src="imageUrl" />
					</div>
					<div class="left-top-welcome" :style="{color:webInfo.textColorActive}">{{adminName}}欢迎你！</div>
				</div>
				<!-- 导航栏盒子-->
				<div class="left-navs-box">
					<div class="navs-inner-box">
						<el-menu :default-active="id" class="navs-item-box" :background-color="webInfo.bg"
							:text-color="webInfo.textColor" :active-text-color="webInfo.textColorActive">
							<el-menu-item @click="welTab" index="0">
								<i class="el-icon-s-platform"></i>
								<span slot="title">首页</span>
							</el-menu-item>
							<div v-for="(item,index) in navs" :key="item.id">
								<!-- 没有子选项 -->
								<el-menu-item @click="openTabs(item)" v-if="item.href!='#'" :index="item.id">
									<i :class="item.icon"></i>
									<span slot="title">{{item.title}}</span>
								</el-menu-item>
								<!-- 有子选项 -->
								<el-submenu v-if="item.href=='#'" :index="item.id">
									<template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
									<el-menu-item v-for="(item,index) in item.children" @click="openTabs(item)"
										:key="item.id" :index="item.id">
										<i :class="item.icon"></i>
										{{item.title}}
									</el-menu-item>
								</el-submenu>
							</div>
						</el-menu>
					</div>
				</div>
			</div>
			<!-- /左边 导航栏 -->

			<!-- 右边区域 -->
			<div class="right-box">
				<!-- 顶部栏 -->
				<div class="right-header">
					<div>
						<i @click="isShowNav" :class="showNav?'el-icon-s-fold':'el-icon-s-unfold'"></i>
						<!-- <a :href="'pages/admin/data/index.html?id='+id" class="el-button el-button--primary">数据大屏</a> -->
					</div>
					<div class="header-right">
						<el-tooltip content="系统公告" placement="bottom" effect="light">
							<el-badge is-dot class="item"><i @click="notice" class="el-icon-bell"></i></el-badge>
						</el-tooltip>
						<el-avatar size="small" v-bind:src="userUrl"></el-avatar>
						<!--个人信息操作 -->
						<el-dropdown :show-timeout=100 @command="personCommand">
							<span class="el-dropdown-link">
								{{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="user">个人中心</el-dropdown-item>
								<el-dropdown-item command="pwd">修改密码</el-dropdown-item>
								<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<!-- <el-dialog width="30%" title="修改密码" :visible.sync="innerVisible" append-to-body>
							<el-form label-width="120px">
								<el-form-item label="旧密码">
									<el-input v-model="user.userName" type="" />
								</el-form-item>
								<el-form-item label="新密码">
									<el-input v-model="user.userCode" />
								</el-form-item>
								<el-form-item label="新密码">
									<el-input v-model="user.phone" />
								</el-form-item>

							</el-form>
						</el-dialog> -->
						<el-dialog title="修改密码" :visible.sync="innerVisible" :close-on-click-modal="false">
							<el-form label-width="120px">
								<el-form-item label="旧密码">
									<el-input type="number" show-password v-model="pwd.oldPasswrod"
										placeholder="请输入旧密码"></el-input>
								</el-form-item>
								<el-form-item label="新密码">
									<el-input show-password v-model="pwd.newPasswrod" placeholder="请输入新密码"></el-input>
								</el-form-item>
								<el-form-item label="确认密码">
									<el-input show-password v-model="newPasswrod1" placeholder="请再次输入新密码"></el-input>
								</el-form-item>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button type="primary" @click="updatePwd">
									确认
								</el-button>
								<el-button @click="innerVisible = false">
									关闭
								</el-button>
							</div>
						</el-dialog>
						<el-dialog title="个人中心" :visible.sync="userInfos">
							<el-form label-width="120px" :disabled="true">
								<el-form-item label="用户姓名">
									<el-input v-model="user.userName" />
								</el-form-item>
								<el-form-item label="用户账号">
									<el-input v-model="user.userCode" />
								</el-form-item>
								<el-form-item label="手机号">
									<el-input v-model="user.phone" />
								</el-form-item>
								<el-form-item label="所属角色">
									<el-input v-model="roles.toString()" />
								</el-form-item>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<!-- 								<el-button type="primary" @click="innerVisible=true">
									修改密码
								</el-button> -->
								<el-button @click="userInfos = false">
									关闭
								</el-button>
							</div>
						</el-dialog>
					</div>

				</div>
				<!-- tab 标签栏 -->
				<div class="right-tab-box">
					<div class="tab-left" @click="tabsLeft"><a href="#"><i class="el-icon-arrow-left"></i></a></div>
					<div class="tab-item-box">
						<div class="tab-item-ul">
							<div class="tab-item" @click="welTab" :class="welcome?'tab-item-active':'1'">
								<i class="el-icon-s-platform  tab-item-icon"></i>
								<div class="tab-item-text">首页</div>
							</div>
							<div class="tab-item" @click="tabActive(item)" :id="item.id"
								:class="id==item.id?'tab-item-active':'1'" v-for="(item,index) in tabs">
								<i class="tab-item-icon" :class="item.data.icon"></i>
								<div class="tab-item-text">{{item.data.title}}</div>
								<i @click.stop="tabClose(item)" class="el-icon-close tab-item-close"></i>
							</div>
						</div>
					</div>
					<div class="tab-right" @click="tabsRight"><a href="#"><i class="el-icon-arrow-right"></i></a></div>
					<div class="tabs-close-box">
						<el-dropdown @command="tabsCloseItem" :show-timeout=100>
							<i class="el-icon-arrow-down"></i>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="a">关闭当前标签页</el-dropdown-item>
								<el-dropdown-item command="b">关闭其他标签页</el-dropdown-item>
								<el-dropdown-item command="c">关闭所有标签页</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
				<!-- 内容区域 iframe -->
				<div class="right-contain">
					<iframe src="pages/welcome.html" frameborder="0" scrolling="yes" width="100%" height="100%"
						v-show="welcome && !navs">
					</iframe>
					<template v-for="(item,index) in tabs">
						<iframe :src="item.data.href" frameborder="0" scrolling="yes" width="100%" height="100%"
							v-show="id==item.id">
						</iframe>
					</template>
				</div>

				<!-- 底部栏 -->
				<!-- <div class="right-footer" :style="{backgroundColor:webInfo.bg}"><span>®{{footerText}}</span></div> -->
			</div>
			<!-- /右边区域 -->
		</div>

		<!-- 公告 -->
		<div id="notice" style="display: none;" class="notice-box">
			欢迎使用 枕边文书博客系统！<br />
		</div>
	</body>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>